<template>
  <div class="dashboard-container">
    <!-- 机场信息 -->
    <el-card class="airport-info">
      <template #header>
        <div class="card-header">
          <h3>天津滨海国际机场</h3>
          <p>Tianjin Binhai International Airport</p>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12">
          <div class="info-section">
            <h4><el-icon><Location /></el-icon> 地理位置</h4>
            <p>中国天津市东丽区，距市中心13公里。地处京津冀城市群几何中心，构成"一市三场"的京津冀航空一体化网络。</p>

            <h4><el-icon><OfficeBuilding /></el-icon> 航站楼</h4>
            <el-row :gutter="20" class="terminal-cards">
              <el-col :span="8">
                <el-card shadow="hover" class="terminal-card">
                  <h5>T1</h5>
                  <p>国际/港澳台</p>
                  <el-tag type="success" effect="dark">运行中</el-tag>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="hover" class="terminal-card">
                  <h5>T2</h5>
                  <p>国内</p>
                  <el-tag type="success" effect="dark">运行中</el-tag>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="hover" class="terminal-card">
                  <h5>T3</h5>
                  <p>规划中</p>
                  <el-tag type="info" effect="dark">建设中</el-tag>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12">
          <div class="map-container">
            <img src="@/assets/airport-map.png" alt="机场地图" class="airport-map">
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 航班统计 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :sm="24" :md="12">
        <el-card shadow="hover">
          <template #header>
            <h3>飞机机型统计</h3>
          </template>
          <div style="height: 450px; width: 100%; position: relative;">
            <BarChart />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12">
        <el-card shadow="hover">
          <template #header>
            <h3>机场状态分布</h3>
          </template>
          <div style="height: 450px; position: relative;">
            <PieChart ref="pieChart" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部卡片 - 显示真实统计数据 -->
    <el-row :gutter="20" class="top-cards">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="card-item">
          <div class="card-content">
            <div class="card-icon" style="background-color: #f0f7ff;">
              <el-icon color="#409EFF" :size="24"><User /></el-icon>
            </div>
            <div class="card-info">
              <span class="title">机型种数</span>
              <span class="value">{{ stats.aircraftTypes }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="card-item">
          <div class="card-content">
            <div class="card-icon" style="background-color: #f0f9eb;">
              <el-icon color="#67C23A" :size="24"><Check /></el-icon>
            </div>
            <div class="card-info">
              <span class="title">机场分类种数</span>
              <span class="value">{{ stats.airportCategories }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="card-item">
          <div class="card-content">
            <div class="card-icon" style="background-color: #fdf6ec;">
              <el-icon color="#E6A23C" :size="24"><Clock /></el-icon>
            </div>
            <div class="card-info">
              <span class="title">国内机场总数</span>
              <span class="value">{{ stats.domesticAirports }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="card-item">
          <div class="card-content">
            <div class="card-icon" style="background-color: #fef0f0;">
              <el-icon color="#F56C6C" :size="24"><Close /></el-icon>
            </div>
            <div class="card-info">
              <span class="title">开启机场总数</span>
              <span class="value">{{ stats.openAirports }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import PieChart from '@/components/pie.vue'
import BarChart from '@/components/bar.vue'
import {
  User, Check, Clock, Close, Location, OfficeBuilding
} from '@element-plus/icons-vue'
import { FlightApi } from '@/api/flight'

// 统计数据
const stats = ref({
  aircraftTypes: 0,
  airportCategories: 0,
  domesticAirports: 0,
  openAirports: 0
})

const pieChart = ref(null)

// 获取统计数据
const fetchStats = async () => {
  try {
    // 获取飞机机型数据
    const aircraftRes = await FlightApi.getFlightPlanes(1, 1000)
    const aircraftData = aircraftRes.data || []

    // 统计机型种类
    const aircraftTypeSet = new Set()
    aircraftData.forEach(item => {
      if (item.CFTP) aircraftTypeSet.add(item.CFTP)
    })
    stats.value.aircraftTypes = aircraftTypeSet.size

    // 获取机场数据 - 使用分页获取所有数据
    let allAirportData = []
    let page = 1
    const pageSize = 100
    let hasMore = true

    while (hasMore) {
      const airportRes = await FlightApi.getAirports(page, pageSize)
      if (airportRes.data?.length > 0) {
        allAirportData = [...allAirportData, ...airportRes.data]
        hasMore = airportRes.data.length >= pageSize
        page++
      } else {
        hasMore = false
      }
    }

    // 处理机场数据
    if (allAirportData.length > 0) {
      // 统计机场分类种数 (按APOT_CNNM)
      const airportCategorySet = new Set()
      allAirportData.forEach(item => {
        if (item.APOT_CNNM) airportCategorySet.add(item.APOT_CNNM)
      })
      stats.value.airportCategories = airportCategorySet.size

      // 统计国内机场总数 (APOT_APAT === '2403')
      stats.value.domesticAirports = allAirportData.filter(item =>
        item.APOT_APAT === '2403'
      ).length

      // 修正开启机场总数的统计逻辑
      stats.value.openAirports = allAirportData.filter(item => {
        // 处理可能的多种表示方式
        const aisoValue = item.APOT_AISO?.toString().toUpperCase()
        return aisoValue === '0' || aisoValue === 'O' || aisoValue === 'OPEN'
      }).length

      console.log('机场总数:', allAirportData.length)
      console.log('开启机场统计结果:', stats.value.openAirports)
      console.log('示例数据:', allAirportData.slice(0, 5).map(item => ({
        name: item.APOT_CNNM,
        aiso: item.APOT_AISO
      })))
    } else {
      console.warn('No airport data received')
    }

    // 刷新饼图数据
    if (pieChart.value) {
      pieChart.value.refreshData()
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 初始化数据
onMounted(() => {
  fetchStats()

  // 每5分钟刷新一次数据
  setInterval(fetchStats, 300000)
})
</script>
<style scoped>
.dashboard-container {
  padding: 20px;
}

/* 确保图表容器有固定高度 */
.chart-container {
  height: 400px;
}

/* 其他样式保持不变 */
.airport-info {
  margin-bottom: 20px;
}

.top-cards {
  margin-bottom: 20px;
}

.card-item {
  margin-bottom: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .chart-container {
    height: 300px;
  }
}
</style>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
}

.top-cards {
  margin-bottom: 20px;

  .card-item {
    margin-bottom: 20px;

    .card-content {
      display: flex;
      align-items: center;

      .card-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
      }

      .card-info {
        display: flex;
        flex-direction: column;

        .title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 4px;
        }

        .value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }
}

.airport-info {
  margin-bottom: 20px;

  .card-header {
    h3 {
      margin: 0;
      font-size: 18px;
      color: #303133;
    }

    p {
      margin: 5px 0 0;
      font-size: 14px;
      color: #909399;
    }
  }

  .info-section {
    h4 {
      margin: 20px 0 10px;
      font-size: 16px;
      color: #303133;
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 8px;
      }
    }

    p {
      margin: 0 0 15px;
      color: #606266;
      line-height: 1.6;
    }

    .terminal-cards {
      margin-top: 15px;

      .terminal-card {
        text-align: center;

        h5 {
          margin: 0 0 5px;
          font-size: 18px;
          color: #409EFF;
        }

        p {
          margin: 0 0 10px;
          font-size: 14px;
          color: #909399;
        }

        .el-tag {
          margin-top: 5px;
        }
      }
    }
  }
  .map-container {
    height: 100%;

    .airport-map {
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 4px;
    }
  }
}

.chart-row {
  margin-top: 20px;

  .el-card {
    margin-bottom: 20px;

    h3 {
      margin: 0;
      font-size: 16px;
      color: #303133;
    }

    .chart-container {
      width: 100%;
      height: 300px;
    }
  }
}

@media (max-width: 768px) {
  .top-cards {
    .el-col {
      margin-bottom: 15px;
    }
  }

  .airport-info {
    .info-section {
      margin-bottom: 20px;
    }

    .map-container {
      height: 250px;
    }
  }
}
</style>
